<!DOCTYPE html>
<html>

<head>
    <title>Promise Demo</title>
    <style>
        html {
            font-size: 30px;
        }

        p {
            font-size: x-large;
        }
    </style>
</head>

<body>

    <h1>Promise Demo</h1>
    <p>Random result is:
        <span id='result'>??</span>
    </p>
    <script>
        function random(max) {
            return new Promise((resolve, reject) => {
                setTimeout(function () {
                    let result = Math.floor(Math.random() * max);
                    if (result > 5)
                        resolve(result);
                    else
                        reject(result);
                }, 1000);
            });
        }

        async function dosome() {
            try{
                const r = await random(10);
                const r = await random(20);
                const r = await random(30);
                document.getElementById('result').innerHTML = r;
            }
            catch(err){
                document.getElementById('result').innerHTML = '太小了';
            }
        }
        dosome();
       
        // random(10).then(function (r)  {
        //     document.getElementById('result').innerHTML = r;
            
        
        // }).catch(function(err) {
        //     document.getElementById('result').innerHTML = '太小了';
        // })
        // document.getElementById('result').innerHTML = random();
    </script>
</body>

</html>